<template>
    <!-- <NuxtLayout name="default"> -->
    <template v-if="similarity">
        <create></create>
    </template>
    <template v-else>
        <div class="plazaContainer">
            <div class="create">
                <div @click="startCreate" class="startCreateButton">
                    <div class="startCreateText" @click.prevent="startCreate">开始创作</div>
                    <ElIcon :size="24">
                        <Right class="rightIcon" />
                    </ElIcon>
                </div>

            </div>
            <div class="category">
                <div class="explore"><img class="w-[24px] h-[24px]" :src="IconExplore" />
                    <div class="exploreText text-[16px]">探索</div>
                </div>
                <div @click="changeSearchType(0)"
                    :class="searchType === 'synthesis' ? 'commonCategory selectedCategory' : 'commonCategory'">
                    <div class="categoryText">综合</div>
                </div>
                <div @click="changeSearchType(1)"
                    :class="searchType === 'lastest' ? 'commonCategory selectedCategory' : 'commonCategory'">
                    <div class="categoryText">最新</div>
                </div>
            </div>
            <div class="main">
                <el-empty v-show="!pager.lists.length && !pager.loading" class="mt-[50px]" :image-size="250"
                    :image="EmptyIcon" description="暂时没有绘画哦，快去生成试试吧" />
                <div v-infinite-scroll="getDrawSquareData" :infinite-scroll-delay="200" :infinite-scroll-distance="400"
                    :infinite-scroll-disabled="!pager.more">
                    <template v-if="pager.lists.length">
                        <Waterfall ref="waterFull" :delay="100" :list="pager.lists" :width="326" :gutter="20"
                            :animationDelay="0" :animationDuration="0" backgroundColor="none" animationPrefix="none"
                            animated="none" animationEffect="none" :breakpoints="breakpoints">
                            <template #item="{ item }">
                                <div class="image-payload h-full w-full relative text-sm">
                                    <div class="image-bg">
                                        <image-cover :thumbnail="item?.thumbnail || item?.image" :image="item?.image || item?.image_url
        " @refresh="loadImageSuccess" @on-click="(val) => previewLists = val"></image-cover>
                                    </div>
                                    <!-- <el-tooltip effect="dark" content="生成海报" placement="top">
                                    <div class="image-poster relative" @click="openPoster(item)">
                                        <div class="text-center leading-[38px]"> -->
                                    <!-- <div
                                            class="absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%]"
                                        > -->
                                    <!-- <Icon size="16px" color="#ffffff" name="el-icon-Picture" />
                                        </div>
                                    </div>
                                </el-tooltip> -->
                                    <div class="image-content">
                                        <div class="imageContentPrompt">{{ item.promptsCn }} </div>
                                        <div class="imageContentCreateTime mt-[5px]">{{ item.createTime }} </div>
                                        <el-button :loading="item.loading" style="width:90%;margin-top: 10px;"
                                            type="primary" @click="createSimilarity(item)">创作相似</el-button>

                                        <!-- <p class="text-white line-clamp-2" @click="
                copy(
                    item?.promptsCn || item?.prompts
                )
                ">
                                        {{ item?.promptsCn || item?.prompts }}
                                    </p> -->
                                        <!-- <div class="flex justify-between mt-[10px]">
                                        <div class="flex items-center">
                                            <template v-if="appStore
                ?.getDrawSquareConfig
                ?.is_show_user
                ">
                                                <ElAvatar :size="28" :src="item?.avatar
                " />
                                                <p class="text-[#BBBBBB] ml-[6px] w-[80px] truncate">
                                                    {{
                item.nickname
            }}
                                                </p>
                                            </template>
</div> -->
                                        <!-- <div class="flex items-center" @click="copy(item.prompts)">
                                            <ElImage class="w-[16px] h-[16px]" :src="CopyIcon"></ElImage>
                                            <p class="text-white ml-[6px]">
                                                复制
                                            </p>
                                        </div>
                                    </div>-->
                                    </div>
                                    <div></div>
                                </div>
                            </template>
                        </Waterfall>
                        <div v-if="pager.loading" class="flex justify-center items-center mt-[50px]">
                            <el-icon size="25" class="is-loading">
                                <Loading />
                            </el-icon>
                            <span class="mt-[4px] ml-[10px] text-[#999999]">加载中...</span>
                        </div>
                        <div v-if="!pager.more && !pager.loading" class="flex justify-center items-center mt-[50px]">
                            <span class="mt-[4px] ml-[10px] text-[#999999]">
                                --- 没有更多了 ---
                            </span>
                        </div>
                    </template>
                </div>
            </div>
            <!-- </NuxtLayout> -->
        </div>
        <posterPop ref="popRef"></posterPop>
        <el-image-viewer v-if="previewLists.length" :url-list="previewLists" :hide-on-click-modal="true"
            @close="previewLists = []" />
    </template>
</template>

<script setup lang="ts">
import Waterfall from '~/components/waterfall/index.vue'
import EmptyIcon from '@/assets/images/empty_news.png'
import IconExplore from '@/assets/images/icon_explore.png'
import { getDrawSquareLists, getDrawSquareCateLists } from '~/api/square'
import { Loading } from '@element-plus/icons-vue'
import { useUserStore } from '~/stores/user'
import posterPop from '../../square/_components/posterPop.vue'
import ImageCover from '../../square/_components/image.vue'
import { Right } from '@element-plus/icons-vue'
import { ElIcon } from 'element-plus'
import create from './create/index.vue'
import { drawGetSDTagger } from '~/api/drawing'
const userStore = useUserStore()
const emit = defineEmits(['select']);
interface QueryParamsType {
    keyword: number | string
    pageNo: number
    pageSize: number
    categoryId: number | string
    hot: number
}

const searchType = ref('synthesis')

//弹框ref
const popRef = shallowRef()
const waterFull = shallowRef<any>(null)
const cateLists = ref<any[]>([{ name: '全部', id: '' }])
const previewLists = ref<any>([])
const queryParams = reactive<QueryParamsType>({
    keyword: '',
    pageNo: 0,
    pageSize: 20,
    categoryId: '',
    hot: 0,
})
const pager = reactive({
    more: true,
    loading: false,
    lists: []
})
const breakpoints = {
    4000: { rowPerView: 8 },
    2000: { rowPerView: 6 },
    1800: { rowPerView: 6 },
    1600: { rowPerView: 5 },
    1440: { rowPerView: 5 },
    1360: { rowPerView: 5 },
    1280: { rowPerView: 4 },
    1024: { rowPerView: 3 }
}

const loadImageSuccess = () => {
    waterFull?.value?.renderer()
    // waterFullItem.height = '100%'
}
const resetParams = () => {
    pager.more = true
    queryParams.pageNo = 0
}

const changeCategory = (id: number | string) => {
    if (queryParams.categoryId === id) return
    queryParams.categoryId = id
    resetParams()
    getDrawSquareData()
}
const getCategory = async () => {
    try {
        const data = await getDrawSquareCateLists()
        cateLists.value = [{ name: '全部', id: '' }, ...data]
    } catch (error) {
        console.log('获取分类错误=>', error)
    }
}
const getDrawSquareData = async () => {
    if (pager.loading) return
    if (pager.more) {
        queryParams.pageNo += 1
    } else {
        return
    }
    pager.loading = true
    try {
        const data = await getDrawSquareLists(queryParams)
        const { lists, pageNo, pageSize, count } = data
        if (pageNo * pageSize > count) {
            pager.more = false
        }
        if (pageNo == 1) {
            pager.lists = lists
        } else {
            pager.lists = [...pager.lists, ...lists]
        }
        setTimeout(() => (pager.loading = false), 500)
    } catch (error) {
        pager.more = false
        pager.loading = false
        feedback.msgError(error)
        console.log('获取绘画广场列表错误=>', error)
    }
}
//打开海报
const openPoster = (value: any) => {
    if (!userStore.isLogin) {
        feedback.msgWarning('请登录后再生成海报！')
        return
    }
    popRef.value.open(value)
}
getCategory()
getDrawSquareData()
const similarity = ref(null as any)
//创作类似
const createSimilarity = async (picIntro: object) => {
    picIntro.loading = true
    const data = await drawGetSDTagger({ image: picIntro.image })
    let prompt = ''
    for (const i in JSON.parse(data).caption) {
        if (prompt) {
            prompt = prompt + ' ' + i
        } else {
            prompt += i
        }
    }
    picIntro.loading = false
    emit('select', 'MJ', prompt)
}
const startCreate = () => {
    emit('select', 'MJ')
}
const changeSearchType = (type: number) => {
    if (type === 0) {
        searchType.value = 'synthesis'
        queryParams.hot = 0
    } else {
        searchType.value = 'lastest'
        queryParams.hot = 1
    }
    resetParams()
    getDrawSquareData()
}
</script>
<style lang="scss" scoped>
.plazaContainer {
    margin: auto;
    width: 1300px;
    border-radius: 0px 0px 0px 0px;
    display: flex;
    flex-direction: column;

    .create {
        width: 1300px;
        height: 218px;
        border-radius: 8px 8px 8px 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-image: url('~/assets/images/createBg.png');
        background-size: cover;
        .startCreateButton {

            cursor: pointer;
            width: 350px;
            height: 41px;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 8px 8px 8px 8px;
            border: 1px solid #F86E07;
            display: flex;
            justify-content: center;
            align-items: center;

            .startCreateText {
                width: 64px;
                height: 22px;
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                font-size: 16px;
                color: #F86E07;
                line-height: 19px;
                text-align: left;
                font-style: normal;
                text-transform: none;
            }

            .rightIcon {
                margin-left: 3px;
                color: #F86E07;
            }
        }

        .startCreateButton:hover {
            background: #F86E07;

            .startCreateText {
                color: #ffffff;
            }

            .rightIcon {
                color: #ffffff;
            }

        }
    }

    .category {
        margin-top: 20px;
        display: flex;
        align-items: center;

        .commonCategory {
            margin-left: 20px;
            width: 66px;
            height: 20px;
            background: #262932;
            border-radius: 100px 100px 100px 100px;
            border: 1px solid #262932;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;


            .categoryText {
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 10px;
                color: #8B8E92;
                text-align: left;
                font-style: normal;
                text-transform: none;
            }
        }

        .selectedCategory {
            border: 1px solid #F86E07;

            .categoryText {
                color: #F86E07;
            }
        }

        .explore {
            display: flex;
            margin-left: 10px;

            .exploreText {
                margin-left: 6px;
                //width: 32px;
                height: 22px;
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                color: #8B8E92;
                text-align: left;
                font-style: normal;
                text-transform: none;
            }
        }

    }
}

.main {
    .image-payload:hover {
        .image-bg {
            transform: scale(1.1);
        }

        .image-content {
            opacity: 1;
            bottom: 0;
        }

        .image-poster {
            opacity: 1;
        }
    }

    .image-payload {
        cursor: pointer;
        overflow: hidden;
        border-radius: 12px;

        .image-bg {
            user-select: none;
            //pointer-events: none;
            //transition: all 1s;
        }

        .image-content {
            transition: all 0.5s;
            opacity: 0;
            position: absolute;
            left: 0;
            right: 0;
            bottom: -10px;
            //margin: 10px;
            padding: 10px;
            border-radius: 6px;
            background-color: rgba(0, 0, 0, 0.5);

            text-align: center;
            color: #fff;

            .imageContentPrompt {

                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 3;
                overflow: hidden;
                text-overflow: ellipsis;

            }
            .imageContentCreateTime{
                color:#8B8E92;
            }
        }

        .image-poster {
            transition: opacity 0.5s;
            background-color: rgba($color: #000000, $alpha: 0.5);
            position: absolute;
            top: 10px;
            right: 10px;
            width: 32px;
            height: 32px;
            border-radius: 32px;
            opacity: 0;
        }
    }
}
</style>
